<template>
  <div>
    <el-card
      class="!border-none relative el-card-client"
      v-loading="pager.loading"
      shadow="never"
    >
      <template #header>
        <el-row :gutter="10">
          <el-col :span="4">
            <el-input
              class="mr_10 input_style"
              v-model="queryParams.keywords"
              clearable
              placeholder="请输入搜索关键字"
            />
          </el-col>
          <el-col :span="4">
            <el-input
              class="mr_10 input_style"
              v-model="queryParams.order_no"
              clearable
              placeholder="请输入搜索订单号"
            />
          </el-col>
          <el-col :span="3">
            <el-select
              class="mr_10 input_style_150"
              v-model="queryParams.pay_status"
              clearable
              placeholder="请选择类型状态"
            >
              <el-option
                v-for="(item, index) in dictData.order_status"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="13" class="flex align_center">
            <el-button class="mr_10" type="primary" @click="resetPage">
              <template #icon>
                <el-icon color="#fff">
                  <Search />
                </el-icon> </template
              >搜索
            </el-button>
            <el-button @click="resetParams">重置</el-button>
            <p class="fz_12 ml-10">
              日收益：
              <span class="fz_16 red mr_5">{{ income.toDayMoney }}</span>
              月收益：
              <span class="fz_16 red mr_5">{{ income.monthMoney }}</span>
              总收益：
              <span class="fz_16 red mr_5">{{ income.totalMoney }}</span>
            </p>
          </el-col>
          <!-- <el-col :span="2" class="flex justify-end">
            <move-button></move-button>
          </el-col> -->
        </el-row>
      </template>
      <div>
        <el-table
          :data="pager.lists"
          border
          @selection-change="handleSelectionChange"
          v-loading="pager.loading"
          stripe
          max-height="calc(100vh - 16rem)"
          class="fz16"
        >
          <el-table-column
            label="活动名称"
            prop="title"
            align="center"
            width="160"
          />
          <el-table-column
            label="选手名称"
            prop="player_name"
            align="center"
            width="120"
          />
          <el-table-column
            label="头像"
            prop="player_id"
            align="center"
            width="80"
          >
            <template #default="{ row }">
              <div class="demo-image__preview">
                <el-image
                  style="width: 60%; height: 60%"
                  :src="row.avatar"
                  :preview-src-list="[row.avatar]"
                  :initial-index="0"
                  fit="cover"
                  hide-on-click-modal="true"
                  preview-teleported="true"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户昵称" prop="nickname" align="center" />
          <el-table-column label="礼物名称" prop="gift_name" align="center" />
          <el-table-column
            label="礼物图片"
            prop="type"
            align="center"
            width="80"
          >
            <template #default="{ row }">
              <div class="demo-image">
                <el-image
                  style="width: 60%; height: 60%"
                  :src="row.image"
                  :preview-src-list="[row.image]"
                  :initial-index="0"
                  fit="cover"
                  hide-on-click-modal="true"
                  preview-teleported="true"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="送出的人气票数"
            prop="number_of_votes"
            align="center"
          />
          <!-- <el-table-column label="类型" prop="type" align="center">
            <template #default="{ row }">
              <el-tag type="success">
                <dict-value :options="dictData.zl_type" :value="row.type" />
              </el-tag>
            </template>
          </el-table-column> -->
          <el-table-column label="购买数量" prop="number" align="center" />
          <el-table-column label="订单号" prop="order_no" align="center" />
          <el-table-column
            label="第三方支付流水号"
            prop="out_trade_no"
            align="center"
            width="100"
          />
          <el-table-column label="支付时间" prop="pay_time" align="center">
            <template #default="{ row }">
              <span v-if="row.pay_time">{{
                timeFormat(row.pay_time, "yyyy-mm-dd hh:MM:ss")
              }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" prop="create_time" align="center">
          </el-table-column>
          <el-table-column label="单价" prop="price" align="center" />
          <el-table-column
            label="状态"
            prop="pay_status"
            width="90"
            align="center"
          >
            <template #default="{ row }">
              <el-tag type="success" v-if="row.pay_status === 1">
                <dict-value
                  :options="dictData.order_status"
                  :value="row.pay_status"
                />
              </el-tag>
              <el-tag type="danger" v-else-if="row.pay_status === 0">
                <dict-value
                  :options="dictData.order_status"
                  :value="row.pay_status"
                />
              </el-tag>
              <el-tag type="info" v-else>
                <dict-value
                  :options="dictData.order_status"
                  :value="row.pay_status"
                />
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="用户id" prop="pay_time" align="center" />
        </el-table>
      </div>
      <div class="flex mr-4 position">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      :dict-data="dictData"
      @success="getLists"
      @close="showEdit = false"
    />
  </div>
</template>

<script lang="ts" setup name="zgGiftOrderLists">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import { apiZgGiftOrderLists, apiZgGiftOrderDelete } from "@/api/zg_gift_order";
import { apiZgGiftinfo } from "@/api/zg_gift_log";

import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import EditPopup from "./edit.vue";
import moveButton from "@/components/moveButton/index.vue";

const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);

// 查询条件
const queryParams = reactive({
  keywords: "",
  order_no: "",
  pay_status: "",
});

// 选中数据
const selectData = ref<any[]>([]);

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({ id }) => id);
};

// 获取字典数据
const { dictData } = useDictData("order_status,zl_type");

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiZgGiftOrderLists,
  params: queryParams,
});

// 添加
const handleAdd = async () => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("add");
};

// 编辑
const handleEdit = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("edit");
  editRef.value?.setFormData(data);
};

// 删除
const handleDelete = async (id: number | any[]) => {
  await feedback.confirm("确定要删除？");
  await apiZgGiftOrderDelete({ id });
  getLists();
};
//  顶部收益接口
const income = ref<any>({
  monthMoney: 0,
  toDayMoney: 0,
  totalMoney: 0,
});
const getIncome = async () => {
  const res = await apiZgGiftinfo();
  await nextTick();
  income.value = res;
};

getIncome();
getLists();
</script>
<style lang="scss" scoped>
.fz16 {
  font-size: 0.8rem;
  // color: red !important;
}
.flex {
  display: flex !important;
}

.input_style {
  width: 100%;
}

.align_center {
  align-content: center;
  align-items: center;
  justify-content: left !important;
}
</style>
